<template>
  <div>
    <h1>资源搜索</h1>
    <div style="margin-top: 15px;">
      <el-input placeholder="手机号可以输入多个用空格或者逗号隔开" v-model="search" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option
            v-for="item in searchItem"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="searchBtn" :disabled="flage"></el-button>
      </el-input>
    </div>
    <el-table :data="currentList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="患者姓名：">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="创建人：">
              <span>{{ props.row.createName }}</span>
            </el-form-item>
            <el-form-item label="患者性别：">
              <span>{{ props.row.sex }}</span>
            </el-form-item>
            <el-form-item label="咨询大夫：">
              <span>{{ props.row.zxdf }}</span>
            </el-form-item>
            <el-form-item label="患者电话：">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="创建日期：">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
            <el-form-item label="主治医师：">
              <span>{{ props.row.doctor }}</span>
            </el-form-item>
            <el-form-item label="最后修改：">
              <span>{{ props.row.lastTime }}</span>
            </el-form-item>
            <el-form-item label="患病种类：">
              <span>{{ props.row.zhenduan }}</span>
            </el-form-item>
            <el-form-item label="住院日期：">
              <span>{{ props.row.date }}</span>
            </el-form-item>
            <el-form-item label="患者地址：">
              <span>{{ props.row.region }}</span>
            </el-form-item>
            <el-form-item label="患者来源：">
              <span>{{ props.row.msgsource }}</span>
            </el-form-item>
            <el-form-item label="资源状态：">
              <span>{{ props.row.status }}</span>
            </el-form-item>
            <el-form-item label="是否紧急：">
              <span>{{ props.row.urgency }}</span>
            </el-form-item>
            <el-form-item label="患者微信：">
              <span>{{ props.row.weixin }}</span>
            </el-form-item>
            <el-form-item label="患者年龄：">
              <span>{{ props.row.age }}</span>
            </el-form-item>
            <el-form-item label="患者QQ：">
              <span>{{ props.row.qq }}</span>
            </el-form-item>
            <el-form-item label="第二备案人：">
              <span>{{ props.row.beianren }}</span>
            </el-form-item>
            <el-form-item label="患病部位：">
              <span>{{ props.row.buwei }}</span>
            </el-form-item>
            <el-form-item label="患者备注：" class="beizhu">
              <span>{{ props.row.textarea }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="患者姓名" prop="name"></el-table-column>
      <el-table-column label="患者电话" prop="phone"></el-table-column>
      <el-table-column label="患者地址" prop="region"></el-table-column>
      <el-table-column label="病种" prop="zhenduan"></el-table-column>
      <el-table-column label="主治医生" prop="doctor"></el-table-column>
      <el-table-column label="创建日期" prop="createTime"></el-table-column>
    </el-table>
    <page :allList="allList" @parentCurrentList="getcurrentList"></page>
  </div>
</template>
<script>
import axios from "axios";
import page from "../page";

export default {
  created() {
    // 获取静态资源
    this.getDoctor();
  },
  data() {
    return {
      // 要查询的内容
      search: "",
      // 选择查询的列表
      select: "phone",
      // 请求过来的所有数据
      allList: [],
      // 当前显示的内容
      currentList: [],
      // 禁止连续搜索
      flage: false,
      // 获取静态资源
      searchItem: []
    };
  },
  components: {
    page
  },
  methods: {
    // 获取静态资源
    getDoctor() {
      axios.get("/static/data/doctor.json").then(res => {
        this.searchItem = res.data.searchItem;
      });
    },
    success(msg) {
      this.$message({
        message: msg,
        type: "success"
      });
    },
    fault(msg) {
      this.$message.error(msg);
    },
    getcurrentList(data) {
      // 当前显示的内容
      this.currentList = data;
    },
    searchBtn() {
      var that = this;
      this.flage = true;
      if (this.search.trim() != "" && this.select != "") {
        // 创建搜索对象
        var searchData = {};
        searchData[this.select] = this.search;
        // 发送搜索数据到后台
        axios.get("api/search", { params: { searchData } }).then(res => {
          if (res.data.status == 0) {
            that.allList = res.data.data.reverse();
            that.currentList = [];
            // 返回结果小于10就显示全部
            if (that.allList.length < 10) {
              that.currentList = that.allList;
            } else {
              // 不小于10就取出前十个放进数组
              for (let i = 0; i < 10; i++) {
                that.currentList.push(that.allList[i]);
              }
            }
            // 发送成功禁止按钮三秒
            that.success(res.data.msg);
            setTimeout(function() {
              that.flage = false;
            }, 3000);
          }
        });
      } else {
        setTimeout(function() {
          that.flage = false;
        }, 3000);
        this.fault("输入有误");
      }
    },
    look(data) {
      console.dir(data);
    }
  }
};
</script>
<style lang="stylus" scoped>
.el-select {
  width: 80px !important;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.input-with-select {
  width: 500px;
  margin-bottom: 15px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table .demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
  color: #000;
}

.beizhu {
  width: 938px !important;
}
</style>
